<template>
    <div>
      <h1>坐标X:{{x}}</h1>
      <h1>坐标Y: {{y}}</h1>
      <div >
        {{age1}}
      </div>
    </div>
    
</template>

<script>
import mousePosition from './mousePosition'
import { computed, reactive, shallowRef, triggerRef, watchEffect } from 'vue'
export default {
  setup() {
    const { x, y } = mousePosition()
    const shallow = shallowRef({
      greet: 'Hello, world'
    })
    console.log({
      a: 'dasda' && 22,
      b: 'sdfda'&&0&&'eqweqw'&&['1'],
      c: false&&'eqweqwe'&&33&&44
    })
    // 第一次运行时记录一次 "Hello, world"
    watchEffect(() => {
      console.log(shallow.value.greet)
    })
    const state = reactive({
      age: 18,
      name: '亮'
    })
    let age1 = computed(() => {
        return state.age + 1
    })
    setTimeout(() => {
      state.age = 25
    }, 2000)
    // 这不会触发作用 (effect)，因为 ref 是浅层的
    shallow.value.greet = 'Hello, universe'
    // 记录 "Hello, universe"
    triggerRef(shallow)
    return {
      x,
      y,
      age1
    }
  }
}
</script>

<style>

</style>